<template>
	<z-paging ref="pagingRef" v-model="state.list" @query="queryList">
		<template #top>
			<hx-navbar title="退款/售后"></hx-navbar>
		</template>
		<view class="refunds-list-container">
			<view class="refunds-list-warp" v-for="(item, index) in state.list" :key="index" @click="toDetail(item.id)">
				<!-- 显示退款商品 -->
				<view class="refunds-goods">
					<image :src="item.orderItem.picUrl" />
					<view class="right">
						<view class="goods-title u-line-2"> {{ item.orderItem.spuName }} </view>
						<view class="goods-spec" v-if="item.specsInfo">{{ item.specsInfo }}</view>
						<view class="goods-price">
							<view class="goods-quantity">申请数量：{{ item.orderItem.buyQuantity }} </view>
							<view class="text-price" style="color: red"> {{ item.refundAmount }} </view>
						</view>
					</view>
				</view>
				<!-- 状态 -->
				<view class="refunds-list-status">
					<view class="refunds-list-status-warp">
						<view class="u-padding-10">
							{{ item.statusDesc }}
						</view>
						<view class="u-padding-10" style="color: #909090">
							<text v-if="item.status == '1' || item.status == '2'"> 服务正在进行中 </text>
							<text v-if="item.status == '11' || item.status == '12'"> 服务已完成，感谢您的支持 </text>
							<text v-if="item.status == '21' || item.status == '22'"> {{ item.refuseReason }} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getPage } from '@/api/order/orderRefunds';
const pagingRef = ref<ZPagingInstance>();
const state = reactive<{ list: any }>({
	list: [],
});
const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage({
		current: pageNo,
		size: pageSize,
		descs: 'create_time',
	}).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};
const toDetail = (id: string) => {
	uni.$hxRouter.push('/pages/order/order-refunds/refunds-detail/index?id=' + id);
};
</script>

<style lang="scss">
.refunds-list-container {
	padding: 20rpx;

	.refunds-list-warp {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.refunds-goods {
			display: flex;
			padding-top: 10rpx;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1 0 0%;
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					font-size: 28rpx;
				}

				.goods-spec {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909090;
				}
				.goods-price {
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
		.refunds-list-status {
			background-color: #f1f1f1;
			border-radius: 10rpx;
			padding: 20rpx;
			margin: 40rpx;
			.refunds-list-status-warp {
				display: flex;
			}
		}
	}
}
</style>
